<template>
<div class="tips-box">
    <span>{{ tips }}</span>
</div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { useScreenCpnsStore } from "@/stores/screenCpns";
const screenCpnsStore = useScreenCpnsStore();
const { screenCpnsState } = storeToRefs(screenCpnsStore);
import { computed } from 'vue'
// 无内容的提示文字
const tips = computed(() => {
	if (
		!screenCpnsState.value.activeCpnId &&
		!screenCpnsState.value.screenCpns.length
	) {
		return "请拖拽组件至画布";
	}
});
</script>
<style scoped lang='scss'>
.tips-box {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 15%;
	display: flex;
	justify-content: center;
	align-items: end;
}
</style>
